<template>
  <div class="frame" style="min-height: 100vh">
    <mu-drawer class="pos-r" :z-depth=3 :open.sync="open" :docked="docked" :right="position === 'right'" style="width: 200px;">
      <div class="pos-f t0 l0 r0"><mu-appbar color="#4980b5" :z-depth=0>SANO ADMIN</mu-appbar></div>
      <div><mu-appbar color="#4980b5" :z-depth=0>SANO1</mu-appbar></div>

      <mu-list style="width:200px;" button v-for="(item,index) in menus" :key="item.id" v-model="curMenuId" @change="menuClick" toggle-nested>
        <mu-sub-header :ripple="false">
          <span class="c12"> {{item.name}}</span>
        </mu-sub-header>
        <template v-for="son in item.sons">
          <mu-list-item button nested nested-list-class="bdlso bdc1 bdw6" :open="false"  v-if="son.sons.length > 0">
            <mu-list-item-title class="flrc">
              <mu-icon :value="!$com.isbool(son.icon)?'view_day':son.icon" size="18"></mu-icon>
              <span class="flex1 padl5"> {{son.name}}</span>
            </mu-list-item-title>
            <mu-list-item-action v-if="son.sons.length > 0">
              <mu-icon class="toggle-icon" size="18" value="keyboard_arrow_down"></mu-icon>
            </mu-list-item-action>
            <mu-list-item exact exact-active-class="bc13" active-class="bc13" slot="nested" button v-for="sub in son.sons" :to="sub.url" :value="sub.id">
              <mu-list-item-title class="flrc">
                <mu-icon :value="!$com.isbool(sub.icon)?'dashboard':sub.icon" size="12"></mu-icon>
                <span class="flex1 padl5"> {{sub.name}}</span>
              </mu-list-item-title>
            </mu-list-item>
          </mu-list-item>
<!--          else-->
          <mu-list-item exact exact-active-class="bc13" active-class="bc13" button :to="son.url" v-else :value="son.id">
            <mu-list-item-title class="flrc">
              <mu-icon :value="!$com.isbool(son.icon)?'dashboard':son.icon" size="18"></mu-icon>
              <span class="flex1 padl5"> {{son.name}}</span>
            </mu-list-item-title>
          </mu-list-item>
        </template>


      </mu-list>
    </mu-drawer>
    <div class="app-content flex-c flex-fill" :class="open?' is-open':''" style="height: 100vh;" >
      <mu-appbar class="w100" :class="open?' is-open':''" color="#4980b5" :z-depth=0 style="min-height: 64px;">
        <mu-button icon slot="left" @click="open = !open">
          <mu-icon value="menu"></mu-icon>
        </mu-button>
        <div class="flex-r">
          <div class="fs14">订单排产系统</div>
        </div>
        <div class="flrc" slot="right">
          <div>
            <mu-menu>
              <mu-button icon>
                <mu-icon value="home"></mu-icon>
              </mu-button>
              <mu-list slot="content">
                <mu-list-item button @click="$goto('/login')">
                  <mu-list-item-content>
                    <mu-list-item-title><span class="fs9">注销登陆</span></mu-list-item-title>
                  </mu-list-item-content>
                </mu-list-item>
              </mu-list>
            </mu-menu>
          </div>
        </div>

      </mu-appbar>
      <!--      <div>haeder</div>-->
      <router-view class="flex1 ofs"></router-view>
    </div>
  </div>
</template>

<script>
  import api from '@/assets/js/api'
  import com from '../../assets/js/com'

  export default {
    name: 'layout',
    data () {
      return {
        curMenuId: 0,
        docked: true,
        open: true,
        position: 'left',
        menus: []
      }
    },
    methods: {
      menuClick(value){
        console.log(value)
        this.curMenuId = value
      }
    },
    mounted () {
      var _this = this
      let checkMenu = com.getLocData("menuUpdate")
      if (checkMenu === 1 && false) {
        _this.menus = com.getLocData("menu")
      }else {
        let loading = _this.$loading()
        // 获取用户按钮
        api.post("/admin/api/frame", {}, function (res) {
          loading.close()
          console.log(res)
          _this.menus = res.d.menuTree
          com.setLocData("menu",_this.menus)
          com.setLocData("menuUpdate",1)
        })
      }
    }
  }
</script>

<style scoped>
  /*@import "../../assets/css/frame.css";*/
</style>
